<template>
    <div>
        <Row class="margin-top-10">
            <Col span="24">
                <Card>
                    <p slot="title" style="height:35px;">
                        <Button v-if="addBtn" type="info" size="small" @click="add()" icon="plus-round"> 新增一级权限</Button>
                    </p>

                    <Modal v-model="modal.form" :title="modal.title" @on-ok="handleSubmit('formValidate')">
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                            <Form-item label="权限" prop="access">
                                <Input v-model="formValidate.access" placeholder="Enter..."></Input>
                            </Form-item>
                            <Form-item label="显示名称" prop="display_name">
                                <Input v-model="formValidate.display_name" placeholder="Enter..."></Input>
                            </Form-item>
                            <Form-item label="描述" prop="description">
                                <Input v-model="formValidate.description" placeholder="Enter..."></Input>
                            </Form-item>
                        </Form>
                    </Modal>

                    <Dropdown v-for="(item, index) in getData" :key="index" placement="right-start" style="display: table;">
                        <Dropdown-item>
                            {{item.display_name}}
                            <Button v-if="addBtn" type="info" size="small" shape="circle" icon="plus-round" @click="add(item)"></Button>
                            <Button v-if="editBtn" type="warning" size="small" shape="circle" icon="edit" @click="edit(item)"></Button>
                            <Button v-if="removeBtn" type="error" size="small" shape="circle" icon="close-round" @click="remove(item)"></Button>
                            <Icon type="ios-arrow-right"></Icon>
                        </Dropdown-item>
                        <Dropdown-menu slot="list" v-if="item.child.length">
                            <Dropdown placement="right-start" v-for="(val, key) in item.child" :key="key">
                                <Dropdown-item>
                                    {{val.display_name}}
                                    <Button v-if="addBtn" type="info" size="small" shape="circle" icon="plus-round" @click="add(val)"></Button>
                                    <Button v-if="editBtn" type="warning" size="small" shape="circle" icon="edit" @click="edit(val)"></Button>
                                    <Button v-if="removeBtn" type="error" size="small" shape="circle" icon="close-round" @click="remove(val)"></Button>
                                    <Icon type="ios-arrow-right"></Icon>
                                </Dropdown-item>
                                <Dropdown-menu slot="list" v-if="val.child.length">
                                    <Dropdown-item v-for="(v, k) in val.child" :key="k">
                                        {{v.display_name}}
                                        <Button v-if="editBtn" type="warning" size="small" shape="circle" icon="edit" @click="edit(v)"></Button>
                                    </Dropdown-item>
                                </Dropdown-menu>
                            </Dropdown>
                        </Dropdown-menu>
                    </Dropdown>

                </Card>
            </Col>
        </Row>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                addBtn: true,
                editBtn: true,
                removeBtn: true,
                getData: [],
                formValidate: {
                    uuid: '',
                    access: '',
                    display_name: '',
                    description: '',
                    puuid: '',
                },
                ruleValidate: {
                    access: [
                        { required: true, message: '请填写权限名称' },
                    ],
                    display_name: [
                        { required: true, message: '请填写显示名称' },
                    ],
                },
                modal: {
                    form: false,
                    title: '',
                },
            }
        },
        methods: {
            /**列表*/
            getList () {
                this.$api.admin_permission_getList().then((res) => {
                    let d = res.data;
                    if (d.code == 0) {
                        this.getData = d.data;
                    } else {
                        this.$Notice.error({
                            title: 'Error Warning',
                            desc: `Error：${d.msg}<br>`
                        });
                    }
                });
            },

            /**新增*/
            add (param) {
                this.modal.form = true;
                this.modal.title = '添加一级权限';
                if (param) {
                    this.modal.title = '添加 '+param.display_name+' 次级权限';
                    this.formValidate.uuid = '';
                    this.formValidate.puuid = param.uuid;
                    this.formValidate.access = '';
                    this.formValidate.display_name = '';
                    this.formValidate.description = '';
                }
            },

            /**编辑*/
            edit (param) {
                this.modal.form = true;
                this.modal.title = '编辑 '+param.display_name+' 权限';

                this.formValidate.uuid = param.uuid;
                this.formValidate.access = param.access;
                this.formValidate.display_name = param.display_name;
                this.formValidate.description = param.description;
            },

            /**删除*/
            remove (param) {
                this.$Modal.confirm({
                    title: '警告',
                    content: '删除后不能恢复，是否确认删除？',
                    onOk: () => {
                        if (param.child.length) {
                            this.$Message.error('此菜单下有子权限，不能删除！');
                        } else {
                            this.$api.admin_permission_remove(param).then((res) => {
                                let d = res.data;
                                if (d.code == 0) {
                                    this.$Notice.success({
                                        title: 'Success',
                                        desc: '操作成功'
                                    });
                                    this.getList();
                                } else {
                                    this.$Notice.error({
                                        title: 'Error Warning',
                                        desc: `Error：${d.msg}<br>`
                                    });
                                }
                            });
                        }
                    },
                    onCancel: () => {
                        console.log(param);
                    }
                });
            },

            /**提交*/
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let apiRequest = null;
                        if (this.formValidate.uuid) {
                            apiRequest = this.$api.admin_permission_edit(this.formValidate);
                        } else {
                            apiRequest = this.$api.admin_permission_add(this.formValidate);
                        }

                        apiRequest.then((res) => {
                            let d = res.data;
                            if (d.code == 0) {
                                this.$Notice.success({
                                    title: 'Success',
                                    desc: '操作成功'
                                });
                                this.getList();
                            } else {
                                this.$Notice.error({
                                    title: 'Error Warning',
                                    desc: `Error：${d.msg}<br>`
                                });
                            }
                        });
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
        },
        mounted() {
            this.$nextTick(() => {
                this.getList();
            });
        },
    }
</script>